iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
Modern Web

和少女工程師一起學 JavaScript 系列 第 15

和少女工程師一起學 JavaScript:Day15 樣板字面值

  • 分享至 

  • xImage
  •  

樣板字面值 Template literals

做字串和變數串接,或是變數和表達式串接

const name = "yinmin";
const str = '我的名字是' + name;
console.log(str); //我的名字是yinmin

缺點:很長串或是換行後會難閱讀,舉例下方範例:

const arr = [
	{name: 'dog', age: 1},
	{name: 'yinmin', age: 18}
];

const str = '<ul>\
<li>我是'+ arr[0].name + ',我'+ arr[0].age + '歲</li>\
<li>我是'+ arr[1].name + ',我'+ arr[1].age + '歲</li>\
</ul>';

// 字串換行後需要加上「反斜線\」

樣板字面值使用 反引號 ``

const name = "yinmin";
const str = `我的名字是${ name }`;
console.log(str); //我的名字是yinmin

變數則使用錢字號+花括號,呈現結果與上面的相同

const arr = [
	{name: 'dog', age: 1},
	{name: 'yinmin', age: 18}
];

const str = `<ul>
<li>我是 ${ arr[0].name },我 ${ arr[0].age }歲</li>
<li>我是 ${ arr[1].name },我 ${ arr[1].age }歲</li>
</ul>`;

和表達式串接

const name = "yinmin";
const greet = ""
const str = `我的名字是 ${ name },${ greet || '很開心認識你!'}`;
console.log(str); //我的名字是yinmin,很開心認識你!

巢狀結構

const arr = [
	{name: 'dog', age: 1},
	{name: 'yinmin', age: 18}
];

const str = `<ul>${ arr.map((item) => `<li>我是 ${ item.name },我 ${ item.age } 歲</li>`).join('') }</ul>`;

//使用join('')將陣列轉為純字串

標籤樣板字面值

參數解釋:

  • strings 字串拆解的結果
  • arg 變數回傳的結果
function greet(strings, ...arg){
	console.log(strings, arg);
}

const myName = 'yinmin';

greet`大家好,我的名字是 ${myName}`;

應用

const myName = 'yinmin';
const greet = (strings, ...arg) => strings.map((str,i)=>`${str}${arg[i] ? `<span>${arg[i]</span>` : ''}`).join('');
const str = greet`大家好,我的名字是 ${myName}`;

console.log(str);

使用時機:有多個字串或多個變數需要使用相同方法時可以考慮使用標籤樣板字面值


上一篇
和少女工程師一起學 JavaScript:Day14 let、const
下一篇
和少女工程師一起學 JavaScript:Day16 箭頭函式
系列文
和少女工程師一起學 JavaScript 27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
捲毛蔡
iT邦新手 4 級 ‧ 2020-09-30 17:25:57

猛ㄛ!Template literals 好像也是 ES6 才有的!超好用XD

我要留言

立即登入留言